<template>
  <div class="good-detail-info">
    <div class="good-detail-pic">
      <img :src="value|goodImg" @click="allImgs" class="rounded">
    </div>
    <div v-if="displayInfo" class="good-detail-name" style="line-height: 23px">
      <div><span class="label">商品货号:</span> {{value.itemNo}}</div>
      <div><span class="label">商品名称:</span> {{value.good.name}}</div>
      <div><span class="label">商品品牌:</span> {{value.brand.name}}</div>
      <div v-if="admin"><span class="label">采购单号:</span> {{value.purchaseSn}}</div>
    </div>
    <el-dialog
      title=""
      :visible.sync="loaded"
      :append-to-body="true"
      :modal-append-to-body="true"
      width="640px"
      class="pic-dialog"
    >
      <el-carousel :autoplay="false" arrow="hover" height="640px">
        <el-carousel-item v-for="item in value.imgs" :key="item">
          <img :src="item" width="640px" height="640px"/>
        </el-carousel-item>
      </el-carousel>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'HGoodStatusDisplay',
    data() {
      return {
        loaded: false
      }
    },
    filters: {
      goodImg: function (data) {
        if (data != null && data.imgs != null && data.imgs.length > 0) {
          return data.imgs[0] + '?x-oss-process=style/small'
        } else {
          return '#'
        }
      }
    },
    props: {
      value: {
        type: Object,
        default: {}
      },
      admin: {
        type: Boolean,
        default: false
      },
      displayInfo: {
        type: Boolean,
        default: true
      }
    },
    methods: {
      allImgs: function () {
        this.loaded = true
      }
    }
  }
</script>
